<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户</title>
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <meta name="viewport"
          content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="app-mobile-web-app-capable" content="yes"/>
    <meta name="app-mobile-web-app-status-bar-style" content="black-translucent"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_772560_nyw5t78j0pd.css">
    <link rel="stylesheet" href="css/customer.css">
</head>
<body>
<div id="app" v-cloak>
    <div class="navbar" id="tab">
        <a href="javascript:void(0);" class="nav_item tc" v-on:click="setTab(1)" v-bind:class="{active:tab==1}">
            <span>所有客户</span>
        </a>
        <a id="behave" href="javascript:void(0);" class="nav_item tc" v-on:click="setTab(2)" v-bind:class="{active:tab==2}">
            <span>客户标签</span>
        </a>
    </div>
    <div style="height:50px"></div>

    <div v-if="tab==1">
        <div class="header bg-white">
            <div class="select tc">最后活动时间 <span class="triangle"></span></div>
            <ul class="flex options">
                <li class="option tc">预计成交率</li>
                <li class="option tc active">最后活动时间</li>
                <li class="option tc">工作交接</li>
                <li class="option tc">扫码</li>
                <li class="option tc">转发</li>
            </ul>
        </div>
        <div class="client_wrap">
            <p id="total_cus" class="tc total">--共{{list.length}}名顾客--</p>
            <div id="cus_list" class="client_item bg-white">
                <a :href="'./time-detail.html?name='+item.name+'&cus_im_id='+item.cus_im_id+'&face_url='+item.cus_face" class="flex item_wrap" v-for="item in list">
                    <div class="avatar"> <img :src="item.cus_face" alt=""> </div>
                    <div class="flex1"> <p class="name">{{item.name}}</p> </div>
                    <div>
                        <p class="status tr">最后活动</p>
                        <p class="date">{{item.time}}</p>
                    </div>
                </a>
            </div>
    </div>
    </div>
    <div v-if="tab==2" class="bg-white">
    <a href="./label.html" class="add-label flex align">
        <i class="ra ra-add"></i>
        <i>新建标签</i>
    </a>
    <div class="tags_wrap">
        <div class="tags_item" v-for="item in tag" v-if="item.list.length">
            <div class="title">{{item.title}}</div>
            <ul class="tags_ul clear">
                <li v-for="tag in item.list">
                    <a :href="getId(tag.id,tag.name)" class="tag">
                        {{tag.name}}({{tag.count}})
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script src="js/footer.js"></script>
<script src="js/common.js"></script>


<script type="text/javascript">



    var app=new Vue({
        el:'#app',
        data:{
            tab:1,
            tag:[],
            timestamp_today:'',
            list:[]
        },
        created: function () {
            this.loadInfo()
            this.getTag()
        },
        methods:{
            setTab:function(t){
                this.tab = t;
            },
            getTag:function () {
                var id = sessionStorage.getItem('login_identifier')
                axios({
                    url:'https://qyim.ec51.com/v1/check/list-my-tag',
                    method:'get',
                    params :{
                        id:id
                    }
                }).then(res=>{
                    this.tag=res.data.data
                })
            },
            getId:function (id,name) {
                return "./label.html?id="+id+"&name="+name
            },
//            formatTimeStamp:function (timestamp, format) {
//                if (!timestamp) {
//                    return 0;
//                }
//                var formatTime;
//                format = format || 'yyyy-MM-dd hh:mm:ss';
//                var date = new Date(timestamp * 1000);
//                var o = {
//                    "M+": date.getMonth() + 1, //月份
//                    "d+": date.getDate(), //日
//                    "h+": date.getHours(), //小时
//                    "m+": date.getMinutes(), //分
//                    "s+": date.getSeconds() //秒
//                };
//
//                if (/(y+)/.test(format)) {
//                    formatTime = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
//                } else {
//                    formatTime = format;
//                }
//                for (var k in o) {
//                    if (new RegExp("(" + k + ")").test(formatTime))
//                        formatTime = formatTime.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
//                }
//                return formatTime;
//            },

            loadInfo:function () {
                var fd=new FormData()
                fd.append('self_im_id',sessionStorage.getItem('login_identifier'))
                axios.post('https://qyim.ec51.com/v1/check/get-imp-cus',fd).then(res=>{
                    this.list=res.data.data
                });
            }
        }

    })
</script>
</body>
</html>